<!--
* @Description SVGComponentIndex svg icon 组件
* @author 三咲问道
* @date 2025/6/6
-->
<template>
  <div class="SVGComponentIndex">
    <div class="icons-list-header">
      {{ `图标列表(${iconsNameList.length})` }}
    </div>
    <div class="icons-list">
      <div v-for="iName in iconsNameList" :key="iName" class="icons-list-item">
        <div class="icon-item">
          <div class="icon-item-svg">
            <svg-icon :name="iName" :size="36" color="#9bbbac"/>
          </div>
          <div class="icon-name" @click="copyIconName(iName)">{{ iName }}</div>
        </div>
      </div>
    </div>

    <div class="m-t">选择复制的icon:</div>

    <svg-icon :name="copyName" :size="36" color="#9bbbac"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import svgIcon from '@/common/components/SVGIcon.vue'

// svgIcon路径下所有图标列表
const svgs = import.meta.glob('@/assets/svgIcon/*.svg')

// 图标名列表
const iconsNameList = Object.keys(svgs).map(key => {
  return key.split('/').pop()?.split('.').shift() || ''
}).filter(i => i !== '')

// 点一下复制图标名
let copyName = ref('smile-filling')
const copyIconName = (name: string) => {
  const input = document.createElement('textarea')
  input.value = name
  document.body.appendChild(input)
  input.select()
  document.execCommand('copy')
  document.body.removeChild(input)

  copyName.value = name

  ElMessage({
    message: '复制成功',
    type: 'success',
  })
}

</script>

<style scoped lang="less">
.SVGComponentIndex {
  height: calc(100vh - 108px);
  overflow-y: auto;

  .icons-list-header {
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .icons-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    //flex-direction: row;
    //flex-wrap: wrap;
    //gap: 10px;
    overflow-y: auto;

    .icon-item {
      background: #fff;
      flex-shrink: 0;
      //width: 160px;
      //border: 1px solid #e0e0e0;
      //border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 16px;

      .icon-item-svg {
        display: flex;
        flex-direction: row;
        gap: 5px;
      }

      .icon-name {
        font-size: 12px;
        color: #333;
        cursor: pointer;
        white-space: nowrap; /* 禁止换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }
  }

  .m-t{
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
}
</style>